<template>
  <div id="echart_bar" style="width:100%; height:300px;"></div>
</template>

<script>
import { srcIpTop10 } from '@/api/safe/access/auxiliary'
import resize from '@/pages/Home/components/mixins/resize'
export default {
  mixins: [resize],
  name: 'echart',
  data () {
    return {
      chart: null
    }
  },
  mounted () {
    this.drawBar()
  },
  methods: {
    drawBar () {
      srcIpTop10().then(res => {
        if (res.status === 0 && res.info && res.info.countList && res.info.countList.length > 0) {
          this.chart = this.$echarts.init(this.$el)
          this.chart.setOption({
            title: {
              text: this.$t('源IP统计TOP10'),
              left: 'center'
            },
            tooltip: {
              trigger: 'axis',
              axisPointer: { // 坐标轴指示器，坐标轴触发有效
                type: 'shadow' // 默认为直线，可选为：'line' | 'shadow'
              }
            },
            grid: {
              left: '3%',
              right: '4%',
              bottom: '25%',
              containLabel: true
            },
            xAxis: [
              {
                type: 'category',
                data: res.info.ipList,
                axisTick: {
                  alignWithLabel: true
                }
              }
            ],
            yAxis: [
              {
                type: 'value'
              }
            ],
            series: [
              {
                name: this.$t('数量'),
                type: 'bar',
                barWidth: '60%',
                data: res.info.countList
              }
            ]
          })
          this.chart.on('click', this.barClick)
        }
      })
    },
    barClick (data) {
      this.$emit('barClickSearch', data.name)
    }
  }
}
</script>

<style scoped>
</style>
